<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">年度作业实施情况</div>
      <div class="loadSecond">
        <div class="seleteYear">
          <div class="slecteName">选择年份:</div>
          <el-select
            v-model="defaultYear"
            placeholder="Select"
            @change="getRenderList()"
            :no-data-text="'无数据'"
            style="width: 120px"
            size="small"
          >
            <el-option
              v-for="item in yearList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
      </div>
      <div
        class="Line"
        style="
          width: 100%;
          height: 1px;
          border-bottom: 1px solid #8c8c8c;
          margin-top: 10px;
          margin-bottom: 10px;
        "
      ></div>
      <div class="loadExcel">
        <div class="button" type="success" @click="uploadFile()">导入</div>
        <div class="button" type="success" @click="getExcelFile()">导出</div>
        <div class="button" type="success" @click="addOne()">新增</div>
        <div class="multiButton" type="success" @click="deleteMulti()">
          删除
        </div>
      </div>
      <div class="table" :style="{ width: tableWidth }">
        <el-table
          empty-text="暂无数据"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#777676 !important',
            fontWeight: '800',
            height: '20px',
          }"
          :row-style="{ height: 30 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          :data="tableData"
          show-summary
          :summary-method="getSummaries"
          @row-dblclick="handleRowDblclick"
          border
          stripe
          style="width: 100%; height: auto"
          max-height="65vh"
          @selection-change="selecttableFunction"
        >
          <el-table-column type="selection" width="35" align="center" />
          <el-table-column
            prop="date"
            align="center"
            label="月份"
            min-width="60"
            :formatter="formatDate"
          >
          </el-table-column>
          <el-table-column label="加注" align="center" min-width="150">
            <el-table-column align="center" prop="shipType" label="需求">
              <el-table-column
                align="center"
                prop="needShipNumber"
                label="艘次"
                min-width="65"
              />
              <el-table-column
                align="center"
                prop="needFillNum"
                label="加注量"
                min-width="80"
              />
            </el-table-column>
            <el-table-column align="center" label="计划"
              ><el-table-column
                align="center"
                prop="planShipNumber"
                label="艘次"
                min-width="65"
              />
              <el-table-column
                align="center"
                prop="planFillNum"
                label="加注量"
                min-width="80"
              >
              </el-table-column>

              <el-table-column
                align="center"
                prop="planAbandonedNum"
                label="弃单数"
                min-width="95"
              /><el-table-column
                align="center"
                prop="planAbandonedOrder"
                label="弃单量"
                min-width="80"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" label="实际"
              ><el-table-column
                align="center"
                prop="actualShipNumber"
                label="艘次"
                min-width="65"
              /><el-table-column
                align="center"
                prop="actualFillNum"
                label="加注量"
                min-width="80"
              >
                <template #default="scoped">
                  <div>
                    {{ parseFloat(scoped.row.actualFillNum).toFixed(1) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="actualAbandonedNum"
                label="最终弃单数"
                min-width="95"
              /><el-table-column
                align="center"
                prop="actualAbandonedOrder"
                label="弃单量"
                min-width="80"
              >
                <template #default="scoped">
                  <div>
                    {{ parseFloat(scoped.row.actualAbandonedOrder).toFixed(1) }}
                  </div>
                </template></el-table-column
              >
              <el-table-column
                align="center"
                prop="planFulfillmentRate"
                :formatter="formaNum"
                label="计划兑现率"
                min-width="95"
              /><el-table-column
                align="center"
                prop="demandFulfillmentRate"
                label="需求兑现率"
                min-width="95"
                :formatter="formaNum"
              />
            </el-table-column>
          </el-table-column>
          <el-table-column label="装载" align="center" min-width="150">
            <el-table-column label="可用" align="center">
              <el-table-column
                align="center"
                prop="haveWindowNum"
                label="窗口数"
                min-width="80"
              />
              <el-table-column
                align="center"
                prop="haveDays"
                label="天数"
                min-width="55"
              />
            </el-table-column>
            <el-table-column label="计划" align="center">
              <el-table-column
                align="center"
                prop="planWindowNum"
                label="窗口数"
              />
              <el-table-column align="center" prop="planDays" label="天数" />
            </el-table-column>
            <el-table-column label="实际" align="center">
              <el-table-column
                align="center"
                prop="actualWindowNum"
                label="窗口数"
              /><el-table-column
                align="center"
                prop="actualDays"
                label="天数"
              /><el-table-column
                align="center"
                prop="actualLoadNum"
                label="装载量"
              />
            </el-table-column>
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
      <!-- <div class="foot">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
      </div> -->
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="changeTop">
          <div
            class="delete"
            @click="deleteOne(id)"
            v-show="addOrEdit == '编辑'"
          >
            删除
          </div>
          <div class="sure" @click="sureAdd()">确认</div>
          <div class="back" @click="backToIndex()">返回</div>
        </div>
        <div class="dialogText">{{ addOrEdit }}</div>
        <div class="manyInput">
          <div class="iuptInnerContain">
            <div class="inputInner">
              <div class="name">作业开始时间:</div>
              <div class="inputContainer">
                <el-config-provider :locale="locale">
                  <el-date-picker
                    v-model="date"
                    type="month"
                    format="YYYY/MM"
                    value-format="YYYY/MM"
                    placeholder="作业开始时间"
                  />
                </el-config-provider>
              </div>
            </div>
            <div class="inputInner">
              <div class="name">加注需求艘次:</div>
              <input
                type="number"
                placeholder="加注需求艘次"
                v-model="needShipNumber"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注需求加注量:</div>
              <input
                type="number"
                placeholder="加注需求加注量"
                v-model="needFillNum"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注计划艘次:</div>
              <input
                type="number"
                placeholder="加注计划艘次"
                v-model="planShipNumber"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注计划加注量:</div>
              <input
                type="number"
                placeholder="加注计划加注量"
                v-model="planFillNum"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注计划弃单数:</div>
              <input
                type="number"
                placeholder="加注计划弃单数"
                v-model="planAbandonedNum"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注计划弃单量:</div>
              <input
                type="number"
                placeholder="加注计划弃单量"
                v-model="planAbandonedOrder"
              />
            </div>
            <div class="inputInner" v-if="addOrEdit == '编辑'">
              <div class="name">加注实际艘次:</div>
              <input
                disabled
                type="number"
                placeholder="加注实际艘次"
                v-model="actualShipNumber"
              />
            </div>
            <div class="inputInner" v-if="addOrEdit == '编辑'">
              <div class="name">加注实际加注量:</div>
              <input
                type="number"
                placeholder="加注实际加注量"
                v-model="actualFillNum"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">加注实际最终弃单数:</div>
              <input
                type="number"
                placeholder="加注实际最终弃单数"
                v-model="actualAbandonedNum"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注实际弃单量:</div>
              <input
                type="number"
                placeholder="加注实际弃单量"
                v-model="actualAbandonedOrder"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注实际计划兑现率:</div>
              <input
                type="number"
                placeholder="加注实际计划兑现率"
                v-model="planFulfillmentRate"
              />
            </div>
            <div class="inputInner">
              <div class="name">加注实际需求兑现率:</div>
              <input
                type="number"
                placeholder="加注实际需求兑现率"
                v-model="demandFulfillmentRate"
              />
            </div>
            <div class="inputInner">
              <div class="name">装载可用窗口数:</div>
              <input
                type="number"
                placeholder="装载可用窗口数"
                v-model="haveWindowNum"
              />
            </div>
            <div class="inputInner">
              <div class="name">装载可用天数:</div>
              <input
                type="number"
                placeholder="装载可用天数"
                v-model="haveDays"
              />
            </div>
            <div class="inputInner">
              <div class="name">装载计划窗口数:</div>
              <input
                type="number"
                placeholder="装载计划窗口数"
                v-model="planWindowNum"
              />
            </div>
            <div class="inputInner">
              <div class="name">装载计划天数:</div>
              <input
                type="number"
                placeholder="装载计划天数"
                v-model="planDays"
              />
            </div>
            <div class="inputInner" v-if="addOrEdit == '编辑'">
              <div class="name">装载实际窗口数:</div>
              <input
                type="number"
                placeholder="装载实际窗口数"
                v-model="actualWindowNum"
                disabled
              />
            </div>
            <div class="inputInner">
              <div class="name">装载实际天数:</div>
              <input
                type="number"
                placeholder="装载实际天数"
                v-model="actualDays"
              />
            </div>

            <div class="inputInner" v-if="addOrEdit == '编辑'">
              <div class="name">装载实际装载量:</div>
              <input
                type="number"
                placeholder="装载实际装载量"
                v-model="actualLoadNum"
                disabled
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          @change="getFile($event)"
          accept=".xls,.xlsx"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import _ from "lodash";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      multi: [],
      totalNumber: 0,
      locale: zhCn,
      token: "",
      tableData: [],
      tableWidth: null,
      page: 1,
      size: 15,
      pageList: [],
      show: "none",
      addOrEdit: "新增",
      currentNum: 0,

      date: "",
      needShipNumber: "",
      needFillNum: "",
      planShipNumber: "",
      planFillNum: "",
      planAbandonedNum: "",
      planAbandonedOrder: "",
      actualShipNumber: "",
      actualLoadNum: "",
      actualAbandonedNum: "",
      actualAbandonedOrder: "",
      planFulfillmentRate: "",
      demandFulfillmentRate: "",
      haveWindowNum: "",
      haveDays: "",
      planWindowNum: "",
      actualFillNum: "",
      planDays: "",
      actualWindowNum: "",
      actualDays: "",
      actualLoadNum: "",
      id: "",
      totalPages: null,
      uploadfile: true,
      data: {
        date: "",
        needShipNumber: "",
        actualFillNum: "",
        needFillNum: "",
        planShipNumber: "",
        planFillNum: "",
        planAbandonedNum: "",
        planAbandonedOrder: "",
        actualShipNumber: "",
        actualLoadNum: "",
        actualAbandonedNum: "",
        actualAbandonedOrder: "",
        planFulfillmentRate: "",
        demandFulfillmentRate: "",
        haveWindowNum: "",
        haveDays: "",
        planWindowNum: "",
        planDays: "",
        actualWindowNum: "",
        actualDays: "",
        actualLoadNum: "",
        id: "",
      },

      show1: "none",
      color: "#EBEBEB",
      color1: "#EBEBEB",
      file: null,
      fileName: "",
      jtData: null,
      yearList: [],
      defaultYear: 2025,
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    backToIndex() {
      if (this.addOrEdit == "编辑") {
        let data = {
          date: this.date,
          needShipNumber: this.needShipNumber,
          needFillNum: this.needFillNum,
          planShipNumber: this.planShipNumber,
          planFillNum: this.planFillNum,
          planAbandonedNum: this.planAbandonedNum,
          planAbandonedOrder: this.planAbandonedOrder,
          actualShipNumber: this.actualShipNumber,
          actualLoadNum: this.actualLoadNum,
          actualAbandonedNum: this.actualAbandonedNum,
          actualAbandonedOrder: this.actualAbandonedOrder,
          planFulfillmentRate: this.planFulfillmentRate,
          planFulfillmentRate: this.planFulfillmentRate,
          demandFulfillmentRate: this.demandFulfillmentRate,
          haveWindowNum: this.haveWindowNum,
          haveDays: this.haveDays,
          planWindowNum: this.planWindowNum,
          planDays: this.planDays,
          actualWindowNum: this.actualWindowNum,
          actualDays: this.actualDays,
          actualLoadNum: this.actualLoadNum,
          actualFillNum: this.actualFillNum,
        };
        let equal = _.isEqual(data, JSON.parse(this.compare));
        if (equal) {
          this.close();
        } else {
          this.$confirm("数据信息有变化是否保存再离开？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            // type: "warning",
          })
            .then(() => {
              this.sureAdd();
            })
            .catch(() => {
              this.close();
            });
        }
      } else if (this.addOrEdit == "新增") {
        this.close();
      }
    },
    // 双击弹窗
    handleRowDblclick(row) {
      this.clickEdit(row.id);
    },
    // 批量删除开始========================
    selecttableFunction(row) {
      if (row.length > 0) {
        this.multi = [];
        row.forEach((element) => {
          this.multi.push(element.id);
        });
      } else {
        this.multi = [];
      }
    },
    deleteMulti() {
      // let that = this;
      if (this.multi.length == 0) {
        return this.$message({
          type: "warning",
          message: "请先选中再进行批量删除操作！",
        });
      }
      let data = {
        idList: this.multi + "",
      };

      this.$alert("确定删除选中的信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/homework-status`,
              params: data,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                if (this.currentNum == this.multi.length && this.page > 1) {
                  this.page--;
                }
                this.getRenderList();
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    //批量删除结束=============================
    formaNum(row, column) {
      let data = row[column.property];
      data = data * 100;
      data = Math.ceil(data * Math.pow(10, 2) - 0.5) / Math.pow(10, 2);
      return data + "%";
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];

      if (data == null || data == "" || data == undefined) {
        return null;
      }
      let date = new Date(data);

      let month = date.getMonth() + 1;

      return `${month}月`;
    },
    formatincludeFlag(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      if (data == 0) {
        return "否";
      } else if (data == 1) {
        return "是";
      }
    },
    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
    },
    getFile(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
    },
    submitAddFile() {
      if (this.file) {
        let data = {
          file: this.file,
        };
        service({
          method: "post",
          url: "/homework-status/upload",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            document.getElementsByClassName("addfile")[0].value = "";
            this.$message({
              message: "上传成功",
              type: "success",
            });
            this.file = "";
            this.fileName = "";
            this.uploadfile = "none";
            this.getRenderList();
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },
    cancelUp() {
      this.file = "";
      this.fileName = "";
      this.uploadfile = "none";
    },
    // 导入文件结束=============
    clickEdit(a) {
      this.addOrEdit = "编辑";

      this.tableData.forEach((item) => {
        if (item.id == a) {
          this.date = item.date;
          this.needShipNumber = item.needShipNumber;
          this.needFillNum = item.needFillNum;
          this.planShipNumber = item.planShipNumber;
          this.planFillNum = item.planFillNum;
          this.planAbandonedNum = item.planAbandonedNum;
          this.planAbandonedOrder = item.planAbandonedOrder;
          this.actualShipNumber = item.actualShipNumber;
          this.actualLoadNum = item.actualLoadNum;
          this.actualAbandonedNum = item.actualAbandonedNum;
          this.actualAbandonedOrder = item.actualAbandonedOrder;
          this.planFulfillmentRate = item.planFulfillmentRate;
          this.planFulfillmentRate = item.planFulfillmentRate;
          this.demandFulfillmentRate = item.demandFulfillmentRate;
          this.haveWindowNum = item.haveWindowNum;
          this.haveDays = item.haveDays;
          this.planWindowNum = item.planWindowNum;
          this.planDays = item.planDays;
          this.actualWindowNum = item.actualWindowNum;
          this.actualDays = item.actualDays;
          this.actualLoadNum = item.actualLoadNum;
          this.actualFillNum = item.actualFillNum;
          this.id = a;
          this.compare = JSON.stringify({
            date: item.date,
            needShipNumber: item.needShipNumber,
            needFillNum: item.needFillNum,
            planShipNumber: item.planShipNumber,
            planFillNum: item.planFillNum,
            planAbandonedNum: item.planAbandonedNum,
            planAbandonedOrder: item.planAbandonedOrder,
            actualShipNumber: item.actualShipNumber,
            actualLoadNum: item.actualLoadNum,
            actualAbandonedNum: item.actualAbandonedNum,
            actualAbandonedOrder: item.actualAbandonedOrder,
            planFulfillmentRate: item.planFulfillmentRate,
            planFulfillmentRate: item.planFulfillmentRate,
            demandFulfillmentRate: item.demandFulfillmentRate,
            haveWindowNum: item.haveWindowNum,
            haveDays: item.haveDays,
            planWindowNum: item.planWindowNum,
            planDays: item.planDays,
            actualWindowNum: item.actualWindowNum,
            actualDays: item.actualDays,
            actualLoadNum: item.actualLoadNum,
            actualFillNum: item.actualFillNum,
          });
        }
        this.show = "block";
      });
    },
    getYear() {
      let that = this;
      service({
        method: "get",
        url: `/homework-status/get-year`,
      })
        .then((r) => {
          that.yearList = r.data;
        })
        .catch((err) => {
          that.$message({
            message: "获取年份失败",
            type: "danger",
          });
        });
    },
    // 删除数据
    deleteOne(a) {
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/homework-status/${a}`,
            })
              .then((r) => {
                if (r.status == "SUCCESS") {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  if (this.currentNum == 1 && this.page > 1) {
                    this.page--;
                  }
                  this.getRenderList();
                  this.show = "none";
                }
              })
              .catch((err) => {
                this.$message({
                  type: "danger",
                  message: "出错了！",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 弹窗确认按钮
    sureAdd() {
      this.data.date = this.date;

      this.data.needShipNumber = this.needShipNumber;
      this.data.needFillNum = this.needFillNum;
      this.data.planShipNumber = this.planShipNumber;
      this.data.planFillNum = this.planFillNum;
      this.data.planAbandonedNum = this.planAbandonedNum;
      this.data.planAbandonedOrder = this.planAbandonedOrder;
      this.data.actualShipNumber = this.actualShipNumber;
      this.data.actualLoadNum = this.actualLoadNum;
      this.data.actualFillNum = this.actualFillNum;
      this.data.actualAbandonedNum = this.actualAbandonedNum;
      this.data.actualAbandonedOrder = this.actualAbandonedOrder;
      this.data.planFulfillmentRate = this.planFulfillmentRate;
      this.data.planFulfillmentRate = this.planFulfillmentRate;
      this.data.demandFulfillmentRate = this.demandFulfillmentRate;
      this.data.haveWindowNum = this.haveWindowNum;
      this.data.haveDays = this.haveDays;
      this.data.planWindowNum = this.planWindowNum;
      this.data.planDays = this.planDays;
      this.data.actualWindowNum = this.actualWindowNum;
      this.data.actualDays = this.actualDays;
      this.data.actualLoadNum = this.actualLoadNum;
      this.data.id = this.id;

      if (this.addOrEdit == "编辑") {
        service({
          method: "put",
          data: this.data,
          url: "/homework-status",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getRenderList();
              this.show = "none";
              this.clearCanShu();
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      } else {
        service({
          method: "post",
          data: this.data,
          url: "/homework-status",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.getRenderList();
              this.show = "none";
              this.clearCanShu();
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
    },
    reduceDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },
    // 关闭弹窗
    close() {
      this.show = "none";
      this.show1 = "none";
      this.clearCanShu();
      this.uploadfile = "none";
    },
    // 新增
    addOne() {
      this.addOrEdit = "新增";
      // this.$refs["dialog"].style.display = show;
      this.show = "block";
    },
    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();

      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },
    async getExcelFile() {
      let that = this;
      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);
      let time = this.getFileName();
      axios({
        method: "get",
        url: this.$loadFile + "/homework-status/export",
        responseType: "blob", // 关键：设置响应类型为blob
        params: {
          fileName: "年度作业实施情况",
          year: this.defaultYear,
        },
        headers: {
          token: that.token,
        },
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          // 创建一个隐藏的<a>标签，并设置其href属性为上面创建的URL
          const link = document.createElement("a");
          link.href = url;
          link.download = "年度作业实施情况-" + time + ".xls"; // 替

          document.body.appendChild(link);

          link.click();

          document.body.removeChild(link);

          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({
            message: "文件下载失败",
            type: "info",
          });
        });
    },
    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    // 获取列表数据
    async getRenderList() {
      let data = {
        page: this.page,
        size: this.size,
        year: this.defaultYear,
      };

      await service({
        methods: "get",
        url: "/homework-status/find-one-page",
        params: data,
      })
        .then((e) => {
          this.totalPages = e.data.totalPages;
          this.totalNumber = e.data.totalElements;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }
          if (this.page < this.totalPages) {
            this.color1 = "#94D474";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          }
          this.tableData = e.data.content;

          this.currentNum = e.data.numberOfElements;
        })
        .catch((err) => {
          alert(err);
        });
    },
    formatterDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    clearCanShu() {
      this.date = "";
      this.needShipNumber = "";
      this.needFillNum = "";
      this.planShipNumber = "";
      this.planFillNum = "";
      this.planAbandonedNum = "";
      this.planAbandonedOrder = "";
      this.actualFillNum = "";
      this.actualShipNumber = "";
      this.actualLoadNum = "";
      this.actualAbandonedNum = "";
      this.actualAbandonedOrder = "";
      this.planFulfillmentRate = "";
      this.demandFulfillmentRate = "";
      this.haveWindowNum = "";
      this.haveDays = "";
      this.planWindowNum = "";
      this.planDays = "";
      this.actualWindowNum = "";
      this.actualDays = "";
      this.actualLoadNum = "";
      this.id = "";
      this.data = {
        date: "",
        needShipNumber: "",
        needFillNum: "",
        planShipNumber: "",
        planFillNum: "",
        actualFillNum: "",
        planAbandonedNum: "",
        planAbandonedOrder: "",
        actualShipNumber: "",
        actualLoadNum: "",
        actualAbandonedNum: "",
        actualAbandonedOrder: "",
        planFulfillmentRate: "",
        demandFulfillmentRate: "",
        haveWindowNum: "",
        haveDays: "",
        planWindowNum: "",
        planDays: "",
        actualWindowNum: "",
        actualDays: "",
        actualLoadNum: "",
        id: "",
      };
    },
    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#94D474";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#94D474";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },
    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#67C23A";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#67C23A";
        }
      }
      this.getRenderList();
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });

      sums[12] = Math.ceil(sums[12] * Math.pow(10, 2) - 0.5) / Math.pow(10, 2);
      sums[13] = Math.ceil(sums[13] * Math.pow(10, 2) - 0.5) / Math.pow(10, 2);

      sums[20] = Math.round(sums[20] * 10) / 10;
      sums[9] = Math.round(sums[9] * 10) / 10;
      return sums;
    },
    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
        document.getElementsByClassName("left")[0].style = "block";
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },

  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作

      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
    $route(to, from) {
      // 在这里根据参数的变化执行刷新页面的逻辑
      if (to.name == from.name) {
        this.close();
      }
    },
  },

  created() {
    this.sendMessage();
    this.getRenderList();
    this.getYear();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    this.getRenderList();

    // this.sendMessage();
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.el-table .el-table__row {
  height: 30px !important; /* 使用 !important 增加优先级 */
}
.addfile {
  width: 100%;
  height: 40px;
  font-size: 15px;
}
.addfile::file-selector-button {
  width: 100%;
  height: 4vh;
  background-color: #1e9fff;
  border: 1px solid #1e9fff;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}
.fileName {
  font-size: 15px;
  color: black;
  height: 3vh;
  line-height: 3vh;
  width: 100%;
  text-align: center;
}

.manyInput {
  width: 780px;
  height: 80vh;
  overflow: auto;
  // background: red;
  margin: auto;

  // overflow: scroll;
  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .inputInner {
      width: 375px;
      min-height: 35px;
      // background: blue;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      color: #365488;
      .name {
        width: 150px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }
      // .name1 {
      //   width: 210px;
      //   margin-left: 10px;
      //   height: 3vh;
      //   line-height: 3vh;
      //   text-indent: 1em;
      //   outline: none;
      //   font-size: 15px;
      //   border: none;
      //   background: #ebebeb;
      //   color: #365488;
      // }
      .inputContainer {
        width: 210px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 220px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        // padding: 5px;
        color: #365488;
        text-align: left;
        // border: 1px solid #365488;
        border-radius: 4px;
        // background-color: #fff;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
      // input[type="number"] {
      //   appearance: textfield;
      //   -moz-appearance: textfield;
      // }
      // 　　input[type="number"]::-webkit-inner-spin-button,
      // 　　input[type="number"]::-webkit-outer-spin-button {
      //   -webkit-appearance: none;
      //   margin: 0;
      // }
    }
    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
}
.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;

    .loadSecond {
      width: 280px;

      text-align: center;
      line-height: 33px;
      color: #777676;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 15px;
      .seleteYear {
        width: 200px;
        // height: 30px;
        display: flex;
        align-items: center;

        .slecteName {
          width: 70px;
          font-size: 16px;
          text-align: left;
          font-weight: 600;
        }
        select {
          width: 140px;
          font-size: 16px;
        }
      }
    }
    // .loadExcel {
    //   width: 300px;
    //   margin-top: 10px;
    //   margin-left: 10px;

    //   height: 20px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   .button {
    //     width: 60px;
    //     line-height: 20px;
    //     font-size: 18px;
    //     text-align: center;
    //   }
    // }
  }
  // background: blue;
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}

.foot {
  width: 340px;
  height: 30px;
  // background: green;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: auto;
  margin-top: 20px;
  color: black;
  font-size: 14px;
  .currentPage,
  .lastPage,
  .nextPage,
  .currentNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 5px;
  }
  .currentPage {
    width: 100px;
    display: block;
    line-height: 30px;
    text-align: right;
  }
  .currentNumber {
    display: block;
    line-height: 30px;
    width: 80px;
    text-align: left;
  }
  .lastPage,
  .nextPage {
    width: 60px;
    // background: blue;
    color: white;
  }
}

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      // margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 150px;
  }
}
</style>
